'use client'

import {useState} from 'react'
import type {ProColumns} from '@ant-design/pro-components'
import {ProTable} from '@ant-design/pro-components'
import {Button, message, Modal, Tag} from 'antd'
import {PlusOutlined} from '@ant-design/icons'

type SaleItem = {
  id: string
  orderNo: string
  customerName: string
  totalAmount: number
  status: string
  createTime: string
  paymentStatus: string
  deliveryStatus: string
  remark?: string
}

export default function SalesPage() {
  const [createModalVisible, setCreateModalVisible] = useState(false)

  const columns: ProColumns<SaleItem>[] = [
    {
      title: '销售单号',
      dataIndex: 'orderNo',
      copyable: true,
      width: 200,
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      width: 200,
    },
    {
      title: '总金额',
      dataIndex: 'totalAmount',
      width: 120,
      valueType: 'money',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      valueEnum: {
        pending: { text: '待处理', status: 'Default' },
        processing: { text: '处理中', status: 'Processing' },
        completed: { text: '已完成', status: 'Success' },
        cancelled: { text: '已取消', status: 'Error' },
      },
    },
    {
      title: '付款状态',
      dataIndex: 'paymentStatus',
      width: 120,
      render: (_, record) => {
        const status = {
          unpaid: { color: 'red', text: '未付款' },
          partial: { color: 'orange', text: '部分付款' },
          paid: { color: 'green', text: '已付款' },
        }
        const currentStatus = status[record.paymentStatus as keyof typeof status]
        return <Tag color={currentStatus.color}>{currentStatus.text}</Tag>
      },
    },
    {
      title: '发货状态',
      dataIndex: 'deliveryStatus',
      width: 120,
      valueEnum: {
        unshipped: { text: '未发货', status: 'Default' },
        shipping: { text: '发货中', status: 'Processing' },
        delivered: { text: '已送达', status: 'Success' },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 180,
      valueType: 'dateTime',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 200,
      ellipsis: true,
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            message.info('编辑功能开发中')
          }}
        >
          编辑
        </a>,
        record.status === 'pending' && (
          <a
            key="process"
            onClick={() => {
              Modal.confirm({
                title: '确认处理',
                content: '确定要开始处理这个销售单吗？',
                onOk: () => {
                  message.success('开始处理')
                },
              })
            }}
          >
            开始处理
          </a>
        ),
        record.status === 'processing' && (
          <a
            key="complete"
            onClick={() => {
              Modal.confirm({
                title: '确认完成',
                content: '确定要完成这个销售单吗？',
                onOk: () => {
                  message.success('处理完成')
                },
              })
            }}
          >
            完成
          </a>
        ),
      ],
    },
  ]

  const mockData: SaleItem[] = [
    {
      id: '1',
      orderNo: 'SO202403010001',
      customerName: '张三',
      totalAmount: 6999,
      status: 'pending',
      createTime: '2024-03-01 10:00:00',
      paymentStatus: 'unpaid',
      deliveryStatus: 'unshipped',
      remark: '购买iPhone 15 Pro Max 1台',
    },
    {
      id: '2',
      orderNo: 'SO202403010002',
      customerName: '李四',
      totalAmount: 3999,
      status: 'completed',
      createTime: '2024-03-01 11:00:00',
      paymentStatus: 'paid',
      deliveryStatus: 'delivered',
      remark: '购买华为平板 1台',
    },
  ]

  return (
    <ProTable<SaleItem>
      columns={columns}
      dataSource={mockData}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => setCreateModalVisible(true)}
        >
          新建
        </Button>,
      ]}
    />
  )
} 